import React, { Suspense, useEffect, useState } from 'react';
import { Link, useRoutes } from 'react-router-dom';
import router from './router';
import { useDispatch } from 'react-redux';
import store, { useAppSelector } from './store';
import { Store } from '@reduxjs/toolkit';
import { add } from './store/modules/counter';
import AppHeader from './components/app-header';
import AppFooter from './components/app-footer';
import { Button } from 'antd';
const App = () => {
    const [num, setNum] = useState(1);

    type StateType = ReturnType<typeof store.getState>;

    const dispatch = useDispatch();
    const counter = useAppSelector((state) => {
        return state.couterSlice.num;
    });
    const routers = useRoutes(router);
    console.log(counter);

    return (
        <>
            <AppHeader />

            <Suspense key={Date.now()} fallback={<div>正在加载...</div>}>
                {routers}
            </Suspense>
            <AppFooter />
        </>
    );
};

export default App;
